<script setup lang="ts">
import { CurrencyList } from '~/components/currency';
import { TEST_CURRENCY } from '~/stores/currency';
import FreeCurrencyTip from './FreeCurrencyTip.vue';

defineOptions({ inheritAttrs: false });
const [refs, setRefs] = useTemplateRefs<{
  freeCurrencyTip: typeof FreeCurrencyTip;
}>();

const appStore = useAppStore();
const currencyStore = useCurrencyStore();
const isQuote = computed(() => currencyStore.quoteDisplay && currencyStore.cryptoName !== TEST_CURRENCY);
const currency = computed(() => {
  const c = { symbol: '', balance: '0' };
  const { crypto, quote, balanceMap } = currencyStore;

  if (!crypto || !quote || !balanceMap)
    return c;

  const balance = balanceMap[crypto.currency].balance;
  c.symbol = isQuote.value ? quote.symbol : '';
  c.balance = isQuote.value ? currencyStore.convert(crypto.currency, balance, quote.currency).toString() : balance;

  return c;
});
const showSelectCurrency = useBoolean();

watch(() => currencyStore.cryptoName, (name) => {
  currencyStore.refetch();

  if (name === TEST_CURRENCY)
    refs.freeCurrencyTip?.open();
});

// 当活动余额可领取时，刷新活动接口
watch(
  () => currencyStore.balanceList?.find(item => item.locked_balance_detail?.status === 3),
  (newVal, oldVal) => {
    if (newVal?.currency !== oldVal?.currency) {
      queryClient.invalidateQueries({
        queryKey: [apis.apiActivityCheckAvailableBonuses.id],
        exact: false,
      });
    }
  },
);
</script>

<template>
  <div
    class="relative h-9 flex rounded-2 bg-sys-layer-e pl-2 text-sm"
    @touchstart="currencyStore.refetch()" @mouseenter="currencyStore.refetch()"
  >
    <!-- 余额显示/币种选择 -->
    <APopover
      v-model:open="showSelectCurrency.is" :class="{ 'pointer-events-none op-50': !!appStore.hiddenBalanceReason }"
      overlayClassName="ant-cover__Popover-currency-select" placement="bottomRight" :arrow="false"
      transitionName="none" trigger="click" :getPopupContainer="(el) => el.parentElement!"
    >
      <div class="current-currency-select flex cursor-pointer select-none items-center">
        <TCurrencyIcon :symbol="currencyStore.crypto?.currency" class="mr-1 size-4.5" />
        <span v-if="appStore.hiddenBalanceReason" class="absolute left-7">{{ appStore.hiddenBalanceReason }}</span>
        <TAmount
          :class="{ invisible: appStore.hiddenBalanceReason }"
          :value="currency.balance" :symbol="currency.symbol" :iconType="currency.symbol ? 'text' : 'img'" :decimals="7"
          format="pad-dec" round="down" :iconPos="isQuote ? 'left' : 'hidden'"
        />
        <i class="i-ion:ios-arrow-down mx-1 transition-all" :class="{ 'rotate-180': showSelectCurrency.is }" />
      </div>
      <template #content>
        <CurrencyList v-model:value="currencyStore.cryptoName" listClass="max-h-60" @close="showSelectCurrency.setFalse()" />
      </template>
    </APopover>
    <!-- 币种选择弹出时，显示全局透明遮罩层 -->
    <div v-if="showSelectCurrency.is" class="abs-full fixed -z-1" />

    <!-- 钱包按钮 -->
    <AButton
      class="ant-cover__Button-3d-primary min-w-9 flex-1 !h-[calc(100%-3px)] flex-center!"
      type="primary" size="small"
      @click="globalPopups.wallet.open"
    >
      <i class="i-local:wallet?mask text-sys-text-head" /><span class="!lt-tablet:hidden">&nbsp;{{ $t('qJaOFvSHkapUsSa7qb0s') }}</span>
    </AButton>
    <!-- 免费币提示  -->
    <FreeCurrencyTip :ref="setRefs.freeCurrencyTip" />
  </div>
</template>

<style lang="scss">
.ant-popover.ant-cover__Popover-currency-select {
  padding-top: 12px;
  left: auto !important;
  right: 0;
  width: 260px;

  @media bp-lt-mobile {
    padding-top: 6px;
  }
}
</style>
